<template>
  <el-select
    class="user-search"
    :value="value"
    @input="choose"
    filterable
    remote
    :placeholder="field.placeHolder?field.placeHolder: $t('common.base.inputKeywordToSearch')"
    :disabled="field.disabled?field.disabled:false"
    clearable
    :loading="loading"
    :remote-method="searchCustomer"
    :multiple="multiple"
  >
    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
  </el-select>
</template>

<script>
import { isOpenData } from '@src/util/platform'
import * as CustomerApi from '@src/api/CustomerApi.ts';
import FormMixin from "@src/component/form/mixin/form";

export default {
  name: "customer-search",
  mixins: [FormMixin],
  props: {
    value: {
      type: [String, Array],
      default: ""
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isOpenData,
      loading: false,
      options: []
    };
  },
  created() {
    let options = sessionStorage.getItem(`${this.field.fieldName}_options`);
    if(!this.isOpenData) {
      this.options = JSON.parse(options || '[]');
    }  
  },
  methods: {
    choose(newValue) {
      let oldValue = null;
      this.$emit("update", { newValue, oldValue, field: this.field });
    },
    searchCustomer(keyword) {
      this.loading = true;
      CustomerApi.getCustomerListAsyn({ keyword, pageNum: 1 })
        .then(res => {
          this.options = res.list;
          this.loading = false;
          sessionStorage.setItem(
            `${this.field.fieldName}_options`,
            JSON.stringify(this.options)
          );
        })
        .catch(err =>
          console.error("searchCustomerManager function catch err", err)
        );
    }
  }
};
</script>

<style lang="scss">
.user-search {
  width: 100%;
}
</style>
